<template>
    <div>
        <el-dialog title="订单详情信息>>" :visible.sync="dialogVisible" width="80%">
            <!-- 订单进度区域 -->
            <el-steps :space="400" :active="orderAddres.order_status" finish-status="success" align-center>
                <el-step title="提交订单"></el-step>
                <el-step title="支付订单"></el-step>
                <el-step title="平台发货"></el-step>
                <el-step title="确认发货"></el-step>
            </el-steps>
            <!-- 收货信息区域 -->
            <div class="address">
                <div class="address-title">收货地址:</div>
                <div class="address-txt">{{ orderAddres.city }}{{
                    orderAddres.details }}</div>
                <div class="address-title">收件人信息:</div>
                <div class="address-txt">{{ orderAddres.tel }}{{
                    orderAddres.name }}</div>
                <div class="flex"></div>
                <div class="address-btn" v-if="orderAddres.order_status != 4">
                    <el-button icon="el-icon-edit" type="success" plain>修改地址</el-button>
                </div>
            </div>
            <!-- 商品信息区域 -->
            <el-table :data="orderDtailList" style="width: 100%" :border="true" :stripe="true">
                <el-table-column type="index" label="序号" align='center'></el-table-column>
                <el-table-column prop="goodsName" label="商品名称" align='center'></el-table-column>
                <el-table-column label="图片" align='center'>
                    <template slot-scope="scope">
                        <img :src="scope.row.goodsImg" style="width: 100px; height: 100px;" />
                    </template>
                </el-table-column>
                <el-table-column prop="goodsPrice" label="商品价格" align='center'></el-table-column>
                <el-table-column prop="goodsNum" label="下单数量" align='center'></el-table-column>
                <el-table-column label="下单金额" align='center'>
                    <template slot-scope="scope">
                        <el-tag type="warning">￥{{ (scope.row.goodsNum * scope.row.goodsPrice).toFixed(2) }}</el-tag>
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            //弹窗状态
            dialogVisible: false,
            //商品信息
            orderDtailList: [],
            //地址
            orderAddres: {
                name: '',//收货姓名
                tel: '',//电话号码
                details: '',//详细地址
                city: '',//省市区，
                order_status: '',//订单状态
                order_code:''//订单编号
            },

        }
    },
    methods: {

    },
    created() {

    }
}

</script>

<style scoped lang="less">
.address {
    background-color: #f0f9eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    margin: 50px 0;
    letter-spacing: 1.5px;

    .address-title {
        color: #67C23A;
        font-weight: bold;
        font-size: 15px;
    }

    .address-txt {
        margin-right: 10px;
        color: #67C23A;
    }

    .flex {
        flex: 1;
    }
}
</style>